<template>
<a-layout class="app-layout">
  <a-layout-content class="invite-content">
    <a-card title="邀请您加入组织" class="invite-card">
      <a-descriptions :column="1" size="default">
        <a-descriptions-item label="组织名称">{{query.org_name}}</a-descriptions-item>
        <a-descriptions-item label="邀请人">{{query.inviter}}</a-descriptions-item>
        <a-descriptions-item label="发起时间">{{query.timestamp}}</a-descriptions-item>
        <a-descriptions-item label="有效时间">{{query.expire}}</a-descriptions-item>
      </a-descriptions>
      <a-button type="primary" block size="large">同意加入</a-button>
    </a-card>
  </a-layout-content>
</a-layout>
</template>

<script setup lang="ts">
import {useRoute} from "vue-router";
import dayjs from "dayjs";
const getDate = (timestamp:string)=>{
  return dayjs(timestamp).format('YYYY-MM-DD HH:mm:ss')
}
const route = useRoute()
const query:any = route.query
query.timestamp = getDate(query.timestamp)
query.expire = getDate(query.expire)

</script>

<style scoped>
  .invite-content{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .invite-card {
    width: 400px;
  }
</style>